import React, { useState, useEffect, useMemo } from 'react';
import Form from '@knownsec/react-component/dist/Form';
import Radio from '@knownsec/react-component/dist/Radio';
import Button from '@knownsec/react-component/dist/Button';
import recursion from '../../../helpers/recursionFormJob';
import s from '../style.module.css'
import cn from 'classnames'
import { VulSettings, SslSettings, SecuritySettings, ContentSettings, ChangeCheckSettings, SpiderSettings, HostSettings } from './settingsItem';

function WebStep2({ data, atid, assetType, vulnsTemp, scheduleJobList, scheduleJobMap, manualJobList, manualJobMap, setBtnType }) {
	const resD = JSON.parse(sessionStorage.resD);
	const form = Form.useFormInstance()
	const vulEnable = Form.useWatch(['vul_settings', 'enable'], form) || data?.vul_settings?.enable;
	const sslEnable = Form.useWatch(['ssl_settings', 'enable'], form) || data?.ssl_settings?.enable;
	const securityEnable = Form.useWatch(['security_event_settings', 'enable'], form) || data?.security_event_settings?.enable;
	const contentEnable = Form.useWatch(['content_settings', 'enable'], form) || data?.content_settings?.enable;
	const changeCheckEnable = Form.useWatch(['change_check_settings', 'enable'], form) || data?.change_check_settings?.enable;
	const triggerType = Form.useWatch('trigger_type', form);
	const cydEnabled = (atid ? manualJobList : scheduleJobList)?.reduce((t, item) => {
		if (data?.job_ids?.includes(item?.value) && item.cydEnabled && !t) {
			t = true
		}
		return t
	}, false)
	const [type, setType] = useState('')
	const webData = useMemo(() => {
		if (vulnsTemp.length > 0 && data && assetType === 'web') {
			const vulList = vulnsTemp.map(i => { return i.value })
			data.vul_settings.collect.vul = data.vul_settings.collect.vul.filter(i => { return vulList.includes(i) })
			return data
		}
	}, [vulnsTemp, data])
	return <>
		<Form form={form} pro
			initialValues={data}
			onValuesChange={(newItem, allValues) => {
				const val = recursion(newItem);
				form.setFieldsValue(val)
			}}
			labelAlign="right"
			labelCol={{ span: 3 }}
			wrapperCol={{ span: 20, offset: 1 }}
			name='webStep2'>
			<Form.Item label="任务类型" name="trigger_type" hidden>
				<Radio.Group>
					<Radio
						className={s.h24}
						value={'schedule'}
						disabled={atid}
					>
						周期性任务
					</Radio>
					<Radio
						refs="taskTriggerTypeManual"
						className={cn(s.ml24, s.h24)}
						value={'manual'}
						disabled={atid}
					>
						单次任务
					</Radio>
				</Radio.Group>
			</Form.Item>
			<div className={s.jobContent}>
				{assetType === 'web' ? <div style={{
					width: 'calc(100% - 48px)',
					margin: '0 auto',
					display: assetType === 'web' ? 'block' : 'none'
				}}>
					<VulSettings cydEnabled={cydEnabled} type={type} vulnsTemp={vulnsTemp} data={webData} enable={vulEnable} triggerType={triggerType} />
					<SslSettings type={type} data={data} enable={sslEnable} triggerType={triggerType} />
					<SecuritySettings type={type} data={data} enable={securityEnable} triggerType={triggerType} />
					<ContentSettings type={type} data={data} enable={contentEnable} triggerType={triggerType} />
					<ChangeCheckSettings type={type} data={data} enable={changeCheckEnable} triggerType={triggerType} />
					<SpiderSettings type={type} data={data} enable={contentEnable} triggerType={triggerType} />
				</div> :
				<div style={{
					width: 'calc(100% - 48px)',
					margin: '0 auto',
					display: assetType === 'host' ? 'block' : 'none'
				}}>
					<HostSettings data={data} />
				</div>}
			</div>
			<Form.Item wrapperCol={{ span: 12, offset: 9 }} style={{ marginTop: '20px' }}>
				<div>
					<Button type="plain" style={{ marginRight: '24px' }} onClick={() => {
						setType('上一步')
						setBtnType('上一步')
					} }>
						上一步
					</Button>
					<Button type="primary" style={{ position: 'relative', top: '-1px' }} onClick={() => {
						setType(atid ? '保存配置' : '下发任务');setBtnType(atid ? '保存配置' : '下发任务')
					}}>
						{atid ? '保存配置' : '下发任务'}
					</Button>
				</div>
			</Form.Item>
		</Form>
	</>
}
export default WebStep2
